<template>
  <!-- 产业服务 - 会议订单 -->
  <div>
    <div class="child-order-header">
      <p>{{ item.createTime }}</p>
      <p>订单号：{{ item.orderSn }}</p>
      <p>{{ item.orderIndustry.organizer }}</p>
    </div>

    <div class="order-container">
      <div class="product leading">
        <div class="cell">
          <div class="product-checkbox-cover">
            <a-image class="product-cover" :src="item.orderIndustry.cover" />
          </div>
          <p>{{ item.orderIndustry.name }}</p>
          <p class="text-center-p">￥{{ item.orderIndustry.quantity * item.orderIndustry.applyCost }}</p>
          <p class="text-center-p">{{ item.orderIndustry.quantity }}</p>
        </div>
      </div>
      <div class="trailing">
        <div class="wrapper">
          <p class="text-center-p">￥{{ item.totalPaymentAmount }}</p>
        </div>
        <div class="wrapper">
          <p class="text-center-p">{{ item.orderIndustry.contactPerson }}</p>
        </div>
        <div class="wrapper">
          <p class="text-center-p">{{ item.statusDescription }}</p>
        </div>
        <div class="wrapper">
          <p class="text-center-p" @click="childOrderClick(item)">详情</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndustyOrders',
  data() {
    return {}
  },

  props: {
    item: {
      type: Object,
      default: undefined,
      require: true,
    },
  },

  components: {},

  mounted() {},

  created() {},

  methods: {
    childOrderClick(childOrderItem) {
      this.$router.push({
        path: '/order/detail',
        query: { orderId: childOrderItem.id },
      })
    },
  },
}
</script>

<style scoped lang="less">
h3 {
  padding: 10px 0;
}

.orders-container {
  margin: 40px auto;
  padding: 10px 15px;
  background: white;
}

.product-table-header {
  padding: 0 10px;
  display: grid;
  height: 44px;
  background: var(--r-background-gray);
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
  grid-template-columns: 60% auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  /* text-align: center; */
}

.product-table-header .leading {
  display: grid;
  grid-template-columns: auto 80px 80px;
  align-items: center;
}
.product-table-header .trailing {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.order-container .leading {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product {
  display: flex;
  flex-direction: column;
  align-items: top;
}
.order-container .product .cell {
  padding: 10px 10px;
  display: grid;
  grid-template-columns: 130px auto 80px 80px;
  /* background: rebeccapurple; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .product > :last-child {
  border-bottom: 0px;
}

.order-container .trailing {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container .trailing .wrapper {
  padding: 10px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.order-container {
  display: grid;
  grid-template-columns: 60% auto;
  font-size: 14px;
  color: rgba(0, 0, 0, var(--r-opacity-tertiary));
  font-weight: 400;
}

.parent-order-container {
  margin: 20px 0px;
  padding: 0px 0px;
}

.child-order-header-splitted {
  display: grid;
  grid-template-columns: 12% 25% auto;
  height: 44px;
  align-items: center;
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0px;
  border-bottom: 0px;
}

.child-order-header {
  display: grid;
  grid-template-columns: 12% 30% auto;
  height: 44px;
  align-items: center;
  background: var(--r-background-gray);
  padding: 0px 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
}
.parent-order-header {
  display: grid;
  grid-template-columns: 12% 25% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 0px;
  padding: 0px 20px;
}
.parent-order-status {
  display: grid;
  grid-template-columns: 12% 25% 20% 20% auto;
  background: var(--r-background-gray);
  height: 44px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 0px 20px;
}

.product .img {
  margin: 0 10px;
  width: 100px;
  height: 100px;
  background: var(--r-background-gray);
  border-radius: 5px;
}
.product-checkbox-cover {
  display: flex;
  flex-direction: row;
}
.product .a-input-number {
  width: 120px;
}

.product-count-input-container {
  margin-top: -4px;
  display: flex;
  justify-content: center;
}

.product-count-input-container .a-input-number {
  width: 126px;
}

.text-center-p {
  text-align: center;
}

.pagination-container {
  margin: 10px 10px;
}
</style>

